<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="个人资料"></fa-navbar>
		<!-- 内容 -->
		<view class="u-p-30">
			<u-form :model="form" ref="uForm" label-width="180">
				<!-- <u-form-item label="ID:" prop="ID" label-width="150"><u-input v-model="form.id" /></u-form-item> -->

				<u-form-item :label-position="labelPosition" label="头像:" prop="avatar" label-width="150">
					<!-- #ifdef MP-WEIXIN -->
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="avatar" :src="url || userInfo.avatar"></image>
					</button>
					<!-- #endif -->

					<!-- #ifndef MP-WEIXIN -->
					<u-image width="70" height="70" :src="url || userInfo.avatar" @click="chooseAvatar"></u-image>
					<!-- #endif -->
				</u-form-item>

				<u-form-item label="昵称:" prop="nickname" label-width="150">
					<input type="nickname" v-model="form.nickname" @change="onInput" placeholder="请输入昵称" />
				</u-form-item>

				<u-form-item label="姓名:" prop="realname" label-width="150"><u-input
						v-model="form.realname" /></u-form-item>
						<!-- 防止一键登录更新 -->
				<u-form-item label="电话:" prop="mobilehand" label-width="150" required>
					<u-input v-model="form.mobilehand"  maxlength=11 />
				</u-form-item>	
						
			 	

				<u-form-item label="性别:" prop="sex" label-width="150">
					<!-- <u-input v-model="form.sex" /> -->
					<u-input disabled @click="showsel=true;" v-model="form.sex" />		
				</u-form-item>


				<u-form-item label="出生日期" prop="birthday" style="width: 100px;">
					<!-- <view  >
					<uni-datetime-picker type="date" :border="false" :clear-icon="false" v-model="form.birthday"
						@maskClick="maskClick" />
					 </view> -->
					 <picker mode="date" :value="form.birthday"  @change="selbirthday">
					     <view class="uni-input">{{form.birthday}}</view>
					  </picker>	
					 
					 

				</u-form-item>

			<!-- 	<u-form-item label="所在地区" prop="area_name">
					<u-input type="select" :select-open="cityShow" v-model="form.area_name" placeholder="请选择地区"
						@click="cityShow = true"></u-input>
				</u-form-item> -->

				<u-form-item label="地址" prop="address">
					<!-- type="textarea" -->
					<u-input v-model="form.address" />

				</u-form-item>
				
				
					<!-- <u-form-item label="等级" prop="money" label-width="150"> -->
									<!-- {{form.leveltext}} -->
									<!-- <input type="id" v-model="form.id"   placeholder="请输入" /> -->
								<!-- </u-form-item> -->
							<!-- 	<u-form-item label="余额(元)" prop="money" label-width="150">
									{{form.money}} -->
									<!-- <input type="id" v-model="form.id"   placeholder="请输入" /> -->
								<!-- </u-form-item> -->
								<u-form-item label="上级ID" prop="agentid" label-width="150">
										<!-- {{form.agentid}} -->
									<input   v-model="form.agentid"   placeholder="请输入" readonly />
								</u-form-item>
								
								


				<!-- <u-form-item label="地址:" prop="addr" label-width="150">
					 <u-input v-model="form.addr" />
					</u-form-item> -->


				<!-- <u-form-item label="姓名:" prop="nickname" label-width="150">
					<input   v-model="form.realname" @change="onInput" placeholder="请输入" />
				</u-form-item> -->
				<!-- <u-form-item label="个人介绍:" prop="bio" label-width="150"><u-input v-model="form.bio" type="textarea" /></u-form-item> -->
			</u-form>
			<view class="u-p-30"><u-button type="primary" hover-class="none"
					:custom-style="{ backgroundColor: '#007eff', color: theme.color }" @click="submit">提交</u-button>
			</view>

			<view class="" v-if="is_render"><fa-citys v-model="cityShow" :areaCode="areaCode"
					@city-change="cityResult"></fa-citys></view>
			<!-- <u-calendar v-model="odtimeshow" :mode="mode" max-date="2099-12-30" @change="odtimechange"></u-calendar> -->
		   <u-select v-model="showsel" mode="single-column" :list="columns" @confirm="confirm"></u-select>
		</view>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
	import {
		avatar
	} from '@/common/fa.mixin.js';
	export default {
		mixins: [avatar],
		data() {
			return {
				labelPosition: 'left',
				url: '',
				form: {
					avatar: '',
					bio: '',
					mobilehand:'',
					username: '',
					nickname: '',
					realname: '',
					// birthday: '',
					birthday:this.getDate(new Date()),
					sex: '',
					area_name: '',
					address: '', 
					area_id: ''

				},
				rules: { 
					realname: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur'
						}
					],
					mobilehand: [
						{
							validator: (rule, value, callback) => {
								 console.log(value);
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 可以单个或者同时写两个触发验证方式
							trigger: ['change', 'blur']
						}
					], 
					sex: [{
							required: true,
							message: '请输入性别',
							trigger: 'blur'
						}
					],
					birthday:[{
							required: true,
							message: '请输入出生日期',
							trigger: 'blur'
						}
					],
					address:[{
							required: true,
							message: '请输入地址',
							trigger: 'blur'
						}
					]
				},
				isdefault: false,
				cityShow: false,
				is_render: false,
				areaCode: [],

				odtimeshow: 0,
				mode: 'date', // date
				dateString: this.getDateTime(new Date()),
				datetimeString: this.getDateTime(new Date(), false),
				datetimeDefaultValueString: '',
				datetimeDefaultValue: this.getDateTime(Date.now() + 1 * 24 * 3600000),
				dateTimestamp: Date.now(),
				dateInstance: new Date(),
				dateRange: [this.getDate(Date.now() - 5 * 24 * 3600000), this.getDate(Date.now() + 5 * 24 * 3600000)],
				datetimeRange: [this.getDateTime(Date.now() - 5 * 24 * 3600000), this.getDateTime(Date.now() + 5 * 24 *
					3600000)],
				start: Date.now() - 10 * 24 * 3600000,
				end: Date.now() + 10 * 24 * 3600000,
				showsel: false,
				columns: [
					  {value:'男',label:'男'},{value:'女',label:'女'}	                    
				]
				
			};
		},
		computed: {
			userInfo() {
				if (this.vuex_user.avatar && this.vuex_user.avatar.indexOf('data:image/svg+xml;base64') == -1) {
					this.form.avatar = this.vuex_user.avatar;
				}
				this.form.username = this.vuex_user.username || '';
				this.form.nickname = this.vuex_user.nickname == '' || this.vuex_user.nickname == '微信用户' ? '' : this
					.vuex_user.nickname;
				this.form.bio = this.vuex_user.bio;
				this.form.id = this.vuex_user.id;
				this.form.realname = this.vuex_user.realname;
		        this.form.mobilehand = this.vuex_user.mobilehand;
				this.form.sex = this.vuex_user.sex;
				  this.form.agentid = this.vuex_user.agentid; 
	
				this.form.birthday = this.vuex_user.birthday;
				this.form.area_name = this.vuex_user.area_name;
				this.form.address = this.vuex_user.address;
				return this.vuex_user;
			}
		},
		onShow() {
			//移除事件监听
			uni.$off('uAvatarCropper', this.upload);
			this.is_render = true;
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},

		methods: {
			odtimeshowfun() {
				this.odtimeshow = 1;

			},
			odtimechange(e) {
				// this.odtimeshow=1;
				this.form.birthday = e.result;
				console.log(e);
			},

			onChooseAvatar(e) {
				this.$api.goUpload({
					filePath: e.detail.avatarUrl,
					name: 'file',
				}).then(res => {
					this.url = res.data.fullurl;
					this.form.avatar = this.url;
				});
			},
			onInput(e) {
				this.form.nickname = e.detail.value;
			},
			submit() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						let res = await this.$api.getUserProfile(this.form);
						this.$u.toast(res.msg);
						if (res.code) {
							setTimeout(() => {
								this.$u.route("/pages/my/my");
							}, 800)
						}
					} else {
						console.log('验证失败');
					}
				});
			},

            selbirthday(e) {
		 	   this.form.birthday = e.detail.value		 			 
		    },
		 
			maskClick(e) {
				console.log(e);

				console.log('----maskClick事件');
			},
			getDateTime(date, addZero = true) {
				return `${this.getDate(date, addZero)} ${this.getTime(date, addZero)}`
			},
			getDate(date, addZero = true) {
				date = new Date(date)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				return `${year}-${addZero ? this.addZero(month) : month}-${addZero ? this.addZero(day) : day}`
			},
			getTime(date, addZero = true) {
				date = new Date(date)
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()
				return this.hideSecond ?
					`${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute}` :
					`${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute}:${addZero ? this.addZero(second) : second}`
			},
			addZero(num) {
				if (num < 10) {
					num = `0${num}`
				}
				return num
			},
			change(value) {
				this.form.isdefault = value ? 1 : 0;
			},
			chooseAddress() {
				uni.chooseLocation({
					success: res => {
						Object.assign(this.form, {
							address: res.address
						});
					}
				});
			},
			//城市选择
			cityResult(e) {
				this.form.area_name = e.province.label + '/' + e.city.label + '/' + e.area.label;
				this.form.area_id = e.area.value;
			},
			confirm(e){ 
				this.form.sex=e[0].value; 
				 
			},

		}
	};
</script>

<style lang="scss">
	.avatar-wrapper {
		width: 100%;
		height: 70rpx;
		border-radius: 10rpx;
		padding: 0;
		margin-left: unset;
		text-align: left;
		background: none;
		border: none;

		&::after {
			border: none;
		}

		.avatar {
			width: 70rpx;
			height: 70rpx;
			border-radius: 10rpx;

			&::after {
				border: 1px solid #ccc;
			}
		}
	}
</style>